<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>消息回复</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
	<!-- 阻止浏览器缓存页面内容 -->
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=8">
	<meta http-equiv="Expires" content="0">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-control" content="no-cache">
	<meta http-equiv="Cache" content="no-cache">
	<link rel="stylesheet" href="/stylesheets/root.css">
	<link rel="stylesheet" href="/stylesheets_copy/reply_massage.css" />
	<link rel="stylesheet" href="/stylesheets/public-stylesheets.css">
</head>

<body>
	<div id="top">
		<a href="/index.html">
			<img src="/images/public_images/return.png" alt="返回">
		</a>
	</div>
	<div class="user-content">
		<!-- <div id="user_data">
			<img src="/images/main/wode.png" alt="" />
			<div id="user_data_name">
				<b>张凯特</b>
				<p class="time_user_reply">03-10 ip属地：广东</p>
			</div>
			<button>关注</button>
		</div>
		<div class="publish_text-line">
			<b>给大家分享一下找工作的一些技巧</b>
			<div>
				今天跟一个HR老友聊天，对方说到：候选人最好不要频繁跳槽，整个职业经历中至少要有一段经历是有3年的。这话不止几个HR跟我们说，很多HR都说过。为什么呢？因为1.频繁的更换环境会造成惯性；对方说到：候选人最好不要频繁跳槽，整个职业经历中至少要有一段经历是有3年的。这话不止几个HR跟我们说，很多HR都说过。为什么呢？因为1.频繁的更换环境会造成惯性。
			</div>
		</div> -->
	</div>
	<div id="reply_all_hot">
		<div id="reply_all" class="switch-item">全部回复</div>
		<div id="reply_hot" class="switch-item">最热回复</div>
	</div>


	<!-- 用户评论列表 -->
	<!-- <div id="user_reply_content_box">
		<div id="user_head_box">
			<img src="/images/main/wode.png" alt="" />
		</div>
		<div id="user_reply_content_and_name">
			<p id="user_reply_name">Mike</p>
			<p id="user_reply_content">共勉加油！</p>
			<p id="user_reply_time">03-11 IP属地：广东</p>
		</div>
		<div id="user_reply_content_zan">
			<img src="/images/massage/zan.png" alt="" />
			<p>30</p>
		</div>
	</div>
	<div id="user_reply_content_box">
			/* 用户头像设置 */ 
		<div id="user_head_box">
			<img src="/images/main/wode.png" alt="" />
		</div>
			/* 用户评论的内容 */ 
		<div id="user_reply_content_and_name">
			<p id="user_reply_name">Mike</p>
			<p id="user_reply_content">共勉加油！</p>
			<p id="user_reply_time">03-11 IP属地：广东</p>
		</div>

		/* 用户点赞功能 */ 
		<div id="user_reply_content_zan">
			<img src="/images/massage/zan.png" alt="" />
			<p>30</p>
		</div>
	</div> -->
	<div id="user_reply_import">
		<div id="user_reply_import_box">
			<p name="user_reply_import_content" contenteditable="true"></p>
			<img onclick="publish_commend()" src="/images/massage/reply.png" alt="" />
		</div>
	</div>
	<div class="conten_end">
		<p>－THE　END－</p>
	</div>
	<script>
		let values = localStorage.getItem("jwt");
		let params = new URLSearchParams(window.location.search);
		let pID = params.get('postID');  // 解析url的数据得到postID
		let editableElement = document.getElementsByName('user_reply_import_content')[0];  // 获取用户输入的内容

		editableElement.addEventListener('keydown', function (event) {
			// 检查按下的键是否是回车键
			if (event.key === 'Enter') {
				// 如果是回车键，阻止默认行为（添加新的段落或换行）
				event.preventDefault();
				// 执行你的函数
				publish_commend();
			}
		});

		function publish_commend() {
			if (editableElement.textContent == "") {
				return alert('请输入内容');
			}

			let data = {
				postID: pID,
				content: editableElement.textContent,
			};
			fetch('/post/sendCommend', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json',
					'Authorization': values // 设置Authorization头部，携带jwt令牌
				},
				body: JSON.stringify(data)
			})
				.then(response => {
					if (!response.ok) {
						throw new Error('网络请求错误: ' + response.status + ' ' + response.statusText);
					}
					// 请求成功，刷新页面
					window.location.reload();
				})
				.catch(error => {
					console.error('There has been a problem with your fetch operation:', error);
				});

			console.log(data);
		}

		// 向后端发请求
		fetch('/post/one', {
			method: 'POST',
			headers: {
				'Content-Type': 'application/json',
				'Authorization': values // 设置Authorization头部，携带jwt令牌
			},
			body: JSON.stringify({ postID: pID })
		})
			// 验证数据是否正常
			.then(response => {
				if (!response.ok) {
					throw new Error('Server Response Not OK');
				}
				return response.json();
			})
			// 将数据展示在前端（因为要查询两次所以参数分别为data['post']、data['commend'])）
			.then(data => {
				data['post'].forEach(postData => {
					console.log(postData.user_icon)
					postData['imgList'] = postData['imgList']['data'].map(code => String.fromCharCode(code)).join('');
					postData['createTime'] = postData['createTime'].slice(0, 10) + ' ' + postData['createTime'].slice(11, 16);
					postData['user_icon'] = postData['user_icon']['data'].map(code => String.fromCharCode(code)).join('');
					let replyAllDiv = document.getElementById('reply_all_hot');
					let user_content = document.querySelector('.user-content');
					let postHtml = `<div id="user_data">
					<img src=${postData.user_icon} alt="" />
					<div id="user_data_name">
					<b>${postData.username}</b>
					<p class="time_user_reply">${postData.createTime}</p>
					</div>
					<button>关注</button>
					</div>
					<div class="publish_text-line">
					<div>${postData.intor}</div>
					</div>
					<div class="img-line" style="background-color: white; text-align: center;">
					${postData.imgList ? `<img src="${postData.imgList}" style="width: 280px; higth: 280px; align = center">` : ''}
					</div>`;
					user_content.innerHTML = postHtml;
				});
				data['commend'].forEach(commendData => {
					commendData['createTime'] = commendData['createTime'].slice(0, 10) + ' ' + commendData['createTime'].slice(11, 16);
					commendData['user_icon'] = commendData['user_icon']['data'].map(code => String.fromCharCode(code)).join('');
					let commend_content = document.getElementById('reply_all_hot');
					let postHtml = `<div id="user_reply_content_box">
					<div id="user_head_box">
					<img src=${commendData.user_icon} alt="" />
					</div>
					<div id="user_reply_content_and_name">
					<p id="user_reply_name">${commendData.username}</p>
					<p id="user_reply_content">${commendData.content}</p>
					<p id="user_reply_time">${commendData.createTime}</p>
					</div>
					</div>`;
					commend_content.insertAdjacentHTML('afterend', postHtml);
				});
			})
			.catch(error => {
				// 处理错误的情况
				console.error('出错了：', error);
			});

		const reply_all = document.getElementById('reply_all');
		const reply_hot = document.getElementById('reply_hot');

		let currentActive = null;

		function switchTab(tab) {
			if (currentActive !== tab) {
				if (currentActive) {
					currentActive.classList.remove('active');
				}
				tab.classList.add('active');
				currentActive = tab;
			}
		}

		reply_all.addEventListener('click', () => {
			switchTab(reply_all);
		});

		reply_hot.addEventListener('click', () => {
			switchTab(reply_hot);
		});
	</script>
</body>

</html>
